<template>
    <div class="banding">
        <van-nav-bar 
            :title="$router.currentRoute.name" 
            left-text="返回" 
            left-arrow 
            @click-left="onClickLeft" 
            @click-right="onClickRight">
            <van-icon name="edit" slot="right" />
        </van-nav-bar>
        
        <div class="account">
            <van-cell-group>
                <van-cell is-link class="cell-account">
                    <template slot="title">
                        <span class="van-cell-text wrapper">
                            <div class="touxiang">
                                <img :src="userinfo != null && undefined !== userinfo.headimgurl ? userinfo.headimgurl : avatar" alt="">
                            </div>
                            <div class="mobile">15602208451</div>
                        </span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>


        <div class="bar-item">
            <van-cell-group>
                <van-cell is-link>
                    <template slot="title">
                        <span class="van-cell-text wrapper">
                            <div class="title">我的二维码</div>
                            <div class="desc"></div>
                        </span>
                    </template>
                </van-cell>
                <router-link to="/addressList">
                    <van-cell is-link>
                        <template slot="title">
                            <span class="van-cell-text wrapper">
                                <div class="title">地址管理</div>
                                <div class="desc">新增 / 修改地址</div>
                            </span>
                        </template>
                    </van-cell>
                </router-link>
            </van-cell-group>
        </div>

        <div class="bar-item">
            <van-cell-group>
                <van-cell is-link>
                    <template slot="title">
                        <span class="van-cell-text wrapper">
                            <div class="title">账号安全</div>
                            <div class="desc">修改密码 / 修改手机</div>
                        </span>
                    </template>
                </van-cell>
                <van-cell is-link>
                    <template slot="title">
                        <span class="van-cell-text wrapper">
                            <div class="title">通用设置</div>
                            <div class="desc">联系客服 / 清除缓存</div>
                        </span>
                    </template>
                </van-cell>
            </van-cell-group>
        </div>


        <van-row type="flex" justify="center">
            <van-col span="22" style="margin-top: 20px;">
                <van-button type="danger" style="width: 100%;">安全退出</van-button>
            </van-col>
        </van-row>

    </div>
</template>

<script>
    import { NavBar, Row, Col, Icon, CellGroup, Cell, Toast, Tabs, Tab, Field, Button } from 'vant'
    import { validateMobile, validateNull } from '@/libs/validate'
    import { setCache, getCache } from '@/libs/cache'
    import store from '@/store'
    import { mapGetters } from 'vuex'
    import avatar from "../../assets/images/avatar.jpeg";

    export default {
        name: 'Banding',
        components: {
            [NavBar.name]: NavBar,
            [Row.name]: Row,
            [Col.name]: Col,
            [Icon.name]: Icon,
            [CellGroup.name]: CellGroup,
            [Cell.name]: Cell,
            [Toast.name]: Toast,
            [Tabs.name]: Tabs,
            [Tab.name]: Tab,
            [Field.name]: Field,
            [Button.name]: Button,
        },
        data() {
            return {
                avatar
            }
        },
        computed: {
            ...mapGetters(['userinfo'])
        },
        created() {
            console.log(this.userinfo)
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            onClickRight() {
                Toast('调查问卷')
            },
        }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../assets/styles/common.scss";
.account{
    .cell-account{
        display: flex;
        align-items: center;

        .wrapper{
            display: flex;
            .touxiang {
                display: flex;
                overflow: hidden;
                margin-left: px2rem(10);
                width: px2rem(50);
                height: px2rem(50);
                border: px2rem(1) solid rgb(255, 255, 255);
                border-radius: px2rem(25);
                background-color: rgba(255, 255, 255, 0);
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .mobile{
                @include center;
                margin-left: px2rem(10)
            }
        }
    }
    
    
}

.bar-item{
    margin-top: px2rem(10);

    .wrapper{
        display: flex;
        justify-content: space-between;
        .desc {
            color: #999;
            font-size: px2rem(12)
        }
    }
} 
</style>